<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Prueba movil</title>
	<link rel="shortcut icon" href="favicon.ico">
	
	<!--  
	<link rel="stylesheet"  href="css/themes/default/jquery.mobile-1.4.0.min.css">
	<link rel="stylesheet"  href="css/themes/default/jquery.mobile.structure-1.4.0.min.css">
	<link rel="stylesheet"  href="css/themes/default/jquery.mobile.theme-1.4.0.min.css">
	<script src="js/jquery.js"></script>
	<script src="js/jquery.mobile-1.4.0.min.js"></script>
	-->
	
	<!--  ${pageContext.request.contextPath} --> 
	
	<link rel="stylesheet"  href=<% out.println("'" +  request.getContextPath() + "/movil/css/themes/default/jquery.mobile.structure-1.4.0.min.css'");%>>
	<link rel="stylesheet"  href=<% out.println("'" +  request.getContextPath() + "/movil/css/themes/default/jquery.mobile.theme-1.4.0.min.css'");%>>
	<link rel="stylesheet"  href=<% out.println("'" +  request.getContextPath() + "/movil/css/themes/default/jquery.mobile-1.4.0.min.css'");%>>	
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
    
	<script src=<% out.println("'" +  request.getContextPath() +"/movil/js/jquery.js'");%>></script>
	<script src=<% out.println("'" +  request.getContextPath() +"/movil/js/jquery.mobile-1.4.0.min.js'");%>></script>
	
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
	<!-- Estilo para el mapa de google -->
	<style>
       #map-canvas {
        height: 100px;
        margin: 0px;
        padding: 0px
      }
    </style>
	
	
	
	
</head>
<body>
	
	<!-- Pagina de home -->
	<div data-role="page" id="home" data-title="Pruebas / home">
		
		<div data-role="header" >
		
		<a href="#panel" 
		data-icon="bars" 
		data-position="right" 
		data-iconpos="notext" 
		class="ui-btn-right">Menu</a>
			<h1>Home</h1>
		</div>
		
		<div id="panel" data-role="panel" data-display="push" data-position="right">
				<ul data-role="listview">
					<li><a href="#pagina2" data-icon="star" data-transition="slide">Pagina2</a></li>
					<li><a href="#listado" data-icon="grid" data-transition="pop">Listado Alumnos</a></li>
					<li><a href="#mapa" data-icon="grid" data-transition="pop">Mapa de Google</a></li>
				</ul>
		</div>
		
		<!-- panel de menu -->
		<div data-role="content">
			<a href="#pagina2" data-role="button" data-theme="b" data-inline="true">Pagina2</a>
			<a href="#listado" data-role="button" data-theme="b" data-inline="true">Listado</a>
		</div>
		
		<div data-role="footer">
			<a href="#politica" data-rel="dialog"> Politica de privacidad</a>
		</div>
		
	</div>
	<!-- Pagina 2 -->
	<div data-role="page" id="pagina2" data-title="Pruebas  / pagina2">
		
		<div data-role="header">
			<a href="#home" 
			data-role="button" 
			data-theme="b" 
			data-inline="true" 
			data-icon="home"
			data-iconpos="notext">Pagina2</a>
			<h1>titulo pagina 2</h1>
			
		</div>
		
		<div data-role="content">
			Lorem impsum--------------
		</div>
		
		<div data-role="footer">
			pie de pagina
		</div>
		
	</div>
	
	<!-- Pagina politica privacidad -->
	<div data-role="page" id="politica" data-title="Pruebas | Politica Privacidad">
		
		<div data-role="header">
			<h1>Politica de privacidad</h1>
		</div>
		
		<div data-role="content">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu accumsan dolor, vitae pulvinar est. Donec id volutpat tellus, ac consequat nulla. Etiam non erat in ligula iaculis consectetur. Maecenas ut pharetra velit. Vivamus aliquam augue justo, interdum sollicitudin leo fringilla et. Nullam scelerisque, libero eu gravida sagittis, quam leo ultrices tellus, et rutrum lacus nisl ac sem. Mauris et dolor a velit hendrerit sodales ut et risus. Phasellus lobortis bibendum orci ac tempor. Proin imperdiet, libero nec aliquet vestibulum, tortor ligula volutpat purus, sed viverra est dolor dictum arcu. Nam tincidunt condimentum mi quis dignissim. Praesent porttitor ante lacus, ut fringilla diam porta ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus ultrices consectetur risus, sed vulputate ipsum ullamcorper vitae. </p>
			<p>Nullam elementum enim eget tristique dictum. Fusce vel fermentum tortor. Proin pharetra massa vitae eros faucibus ornare. Vestibulum enim justo, auctor sed malesuada sit amet, luctus id ante. Pellentesque volutpat arcu at mi feugiat, ut aliquam tortor condimentum. In quis convallis libero. Nullam ut quam dolor. Praesent a leo non urna egestas molestie ut sit amet risus. Nam malesuada, felis in venenatis ultrices, est arcu faucibus nibh, ut ornare massa purus eu metus. Maecenas auctor turpis est. Vestibulum posuere lectus ipsum, eu venenatis nibh fringilla ut. </p>
			<p>Fusce feugiat rutrum metus, nec ullamcorper tortor feugiat vel. Morbi ut ultrices diam, eu ultrices tortor. Aliquam neque lacus, fermentum congue pulvinar ac, venenatis quis libero. Morbi congue non massa sed mollis. Morbi vehicula fringilla mollis. Nunc eleifend odio ligula, id rhoncus odio iaculis vitae. Suspendisse nec elementum sem. </p>
		</div>
		
		<div data-role="footer">
			pie de pagina
		</div>
		
	</div>
	
	<!-- Pagina Listado -->
	<div data-role="page" id="listado" data-title="Pruebas  / Lista Alumnos">
		
		<div data-role="header">
			<a href="#home" 
			data-role="button" 
			data-theme="b" 
			data-inline="true" 
			data-icon="home"
			data-iconpos="notext">Pagina2</a>
			<h1>Lista de Alumnos</h1>
		</div>
		
		<div data-role="content">
			<ul data-role="listview" data-filter="true">
				<%for (int i=0; i<10; i++){%>
				
				<li><a> Alumno <%=i%> </a></li>
					
				<%	} %>
			</ul>
		</div>
		
		<div data-role="footer">
			pie de pagina Listado Alumnos
		</div>
		
	</div>
	
	<!-- Pagina Pagina Mapa -->
	<div data-role="page" id="mapa" data-title="Pruebas  / Mapa">
		
		<div data-role="header">
			<a href="#home" 
			data-role="button" 
			data-theme="b" 
			data-inline="true" 
			data-icon="home"
			data-iconpos="notext">Pagina2</a>
			<h1>Geolocalizacion</h1>
		</div>
		
		<div data-role="content">
			<div id="map-canvas"></div>
			
		</div>
		
		<div data-role="footer">
			Localizacion de google
		</div>
		
	</div>
	
	
	<script type="text/javascript">
	
	function initialize() {
		  var mapOptions = {
		    zoom: 8,
		    center: new google.maps.LatLng(-34.397, 150.644)
		  };
		  map = new google.maps.Map(document.getElementById('map-canvas'),
		      mapOptions);
		}

	
	$(document).ready(function(){
		
		google.maps.event.addDomListener(window, 'load', initialize);
		initialize();
		
		$.mobile.defaultDialogTransition='slideup';
		$.mobile.defaultPageTransition='flip';
	});
	
	
	</script>
	
</body>
</html>